<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <button id="create">创建</button>
    <input type="number" onchange="setWidth()" id="inputWidth">
    <input type="number" onchange="setHeight()" id="inputHeight">
    <input type="number" onchange="setHeight()" id="borderWidth">

    <!-- dom -->
    <div class="target" id="target"></div>
    <script>

        const create = document.getElementById('create')
        const target = document.getElementById('target')
        const inputWidth = document.getElementById('inputWidth')
        const inputHeight = document.getElementById('inputHeight')

        let i = undefined/* false */;
        let arr = [];
        let box = {
            /* 列举出需要渲染出来的属性 */
            w: 100,
            h: 100,
            bgcolor: 'red',
            /* 单例模式 */
            instance: undefined
        }
        /* 更新数据 对象|数组 */

        create.onclick = () => {
            /*    <div class="box"></div> */
            render()
        }
        const setWidth = () => {
            box.w = Number(inputWidth.value)
            render()
        }
        const setHeight = () => {
            box.h = Number(inputHeight.value)
            render()
        }

        /* 渲染dom */
        const render = () => {
            /* 判断是否为空，如果为空，则创建 */
            if (!box.instance /* undefined =>false !false=>true */) {
                const divDom = document.createElement("div")
                document.body.append(divDom)
                box.instance = divDom
            }
            box.instance.style.width = box.w + 'px'
            box.instance.style.height = box.h + 'px'
            box.instance.style.background = box.bgcolor
        }


    </script>
</body>

</html>